<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/4.4.1-1/css/bootstrap.min.css">
    <script>
        //为空校验
        function  f1() {
            //验证姓名
                if ($("input[name='name']").val().length == 0) {
                    //alert("姓名不能为空");
                    $("#sp1").fadeIn(2000).html("<font color='red'>姓名不能为空</font>");
                    return false;
                } else {
                    $("#sp1").fadeOut(2000);
                }
                return true;
        }
        function  f2() {
            //验证年龄
                if ($("input[name='age']".val().length == 0)) {

                    $("#sp_age").fadeIn(2000).html("<font color='red'>年龄不能为空</font>");
                    return false;
                } else {
                    $("#sp_age").fadeOut(2000);
                }
                return true;
        }

        function  f3() {
            //验证性别
            let sex= $("input[name='sex']:checked");
            if(sex.length  === 0){
                $("#sp_sex").fadeIn(2000).html("<font color='red'>请选择性别</font>");
                return false;
            }else{
                $("#sp_sex").fadeOut(2000);
                return true;
            }
        }
        function  f4(){
            //验证生日
            let birthday =$("input[name='birthday']").val();
            if(birthday.length === 0){
                $("#sp_birthday").fadeIn(2000).html("<font color='red'>生日不能为空</font>");
                return false;
            }else{
                $("#sp_birthday").fadeOut(2000);
                return  true;
            }
        }

        function  fun(){
            if(f1() && f2() && f3() && f4()){
                return true;
            }
            return  false;
        }
        $(function (){
            $("#sp1").hide();
            //验证姓名为中文（前端）
            // $("input[name='name']").blur(function (){
            //     //alert("ss");
            //     let n=$(this).val();
            //
            //     if(n.length == 0){
            //
            //         $("#sp1").fadeIn(2000).html("<font>姓名不能为空！</font>");
            //         $(".btn-success").prop("disabled",true);
            //     }else{
            //         //验证格式
            //         let m=/^[\u4e00-\u9fa5]{2,4}$/;
            //         if(!m.test(n)){
            //             $("#sp1").html("<font color='red'>姓名必须是中文格式！</font>");
            //         }else{
            //             $("#sp1").fadeIn(2000).html("<font color='green'>OK！</font>");
            //             $(".btn-success").prop("disabled",false);
            //         }
            //     }
            // });
            //
            // $("input[name='age']").blur(function (){
            //     //alert("ss");
            //     let n=$(this).val();
            //     if(n.length == 0){
            //         $("#sp_age").fadeIn(2000).html("<font>年龄不能为空！</font>");
            //         $(".btn-success").prop("disabled",true);
            //     }else{
            //         //验证格式
            //         let m=/^\d{1,2}$/;
            //         if(!m.test(n)){
            //             $("#sp_age").html("<font color='red'>年龄必须是数字格式！</font>");
            //         }else{
            //             $("#sp_age").fadeIn(2000).html("<font color='green'>OK！</font>");
            //
            //             $(".btn-success").prop("disabled",false);
            //         }
            //     }
            // });

        })


    </script>
</head>
<body>

<div class="container">
     <h4>新增用户</h4>
<form  method="post" enctype="multipart/form-data">
    <input type="text" name="name" placeholder="请输入姓名">
    <span id="sp1"></span>
    <br>
    <input type="text" name="age" placeholder="请输入年龄">
    <span id="sp_age"></span><br>
    <input type="radio" name="sex" value="0">男
    <input type="radio" name="sex" value="1">女
    <span id="sp_sex"></span><br>
    <input type="text" name="birthday" placeholder="请输入生日">
    <span id="sp_birthday"></span><br>

    <input type="file" name="pic"><br>
    <button class="btn btn-success">提交</button>
</form>
</div>
</body>
</html>